<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul,
      li {
        list-style: none;
      }
      h1 {
        width: 100%;
        height: 80px;
        text-align: center;
        line-height: 80px;
        background-color: #434a50;
        color: #ffd04b;
      }
      ul {
        width: 800px;
        height: 80px;
        margin: 0 auto;
      }
      li {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        border: 1px solid #cecece;
      }
      li > input {
        width: 200px;
        height: 40px;
        margin: 20px 0;
      }
      li > button {
        width: 80px;
        height: 40px;
        margin: 20px 0;
      }
    </style>
  </head>
  <body>
    <h1>文章管理</h1>
    <ul>
      <!-- <li>
        <input type="text" /><input type="text" /><input type="text" /><button>
          编辑</button
        ><button>删除</button>
      </li> -->
    </ul>
    <button onclick="GoFn()">去发布</button>
  </body>
  <script type="module">
    import http from "./request.js";
    function loadList() {
      let HTML = "";
      http
        .request({
          url: "/posts",
          method: "get",
          params: {},
        })
        .then((v) => {
          console.log(v.data);
          v.data.forEach((o) => {
            HTML += `
            <li>
              <input id="title" type="text" value="${
                o.title
              }" /><input id="content" type="text" value="${
              o.content
            }" /><input id="status" type="checkbox" ${
              o.status ? "checked" : ""
            }/>
              <button onclick="UpdataFn('${
                o.id
              }')">编辑</button><button onclick="DeleteFn('${
              o.id
            }')">删除</button>
            </li>
            `;
          });
          document.querySelector("ul").innerHTML = HTML;
        });
    }

    window.UpdataFn = function (id) {
      let title = document.querySelector("#title").value;
      let content = document.querySelector("#content").value;
      let status = document.querySelector("#status").checked;
      http
        .request({
          url: "/posts/" + id,
          method: "patch",
          data: {
            title,
            content,
            status,
          },
        })
        .then((v) => {
          if (v.status >= 200 && v.status < 300) {
            alert("修改成功！");
            loadList();
          }
        });
    };
    window.DeleteFn = function (id) {
      //   console.log(id, typeof id);// id为number类型
      http
        .request({
          url: "/posts/" + id,
          method: "delete",
          //   params: {
          //     id: ID,
          //   },
        })
        .then((v) => {
          alert("确定删除？");
          loadList();
        });
    };
    loadList();
    // document.onclick = function () {
    //   loadList();
    // };
    window.GoFn = function () {
      location.href = "./push.html";
    };
  </script>
</html>
